<script>
import useRemoveItem from 'hooks/useRemoveItem';
import { addSlash, getWeek, fileName } from 'utils/date';
import { toRefs } from 'vue';
export default {
  props: ['collapseCtrl', 'state'],
  setup(props, { emit }) {
    const { handleDelete } = useRemoveItem(emit);
    const { state } = toRefs(props);

    let helper = (prop, o) => {
      let d = '';
      d += addSlash(prop);
      d += '\n';
      if (o.learnInfo.length > 0) d += '学习：';
      o.learnInfo.forEach((i) => {
        d += i;
        d += '\n';
      });
      if (o.reviewInfo.length > 0) d += '复习：';
      o.reviewInfo.forEach((i) => {
        d += i;
        d += '\n';
      });
      return d;
    };
    let handleExportCSV = () => {
      let pd = '                                     .';
      let csv = `"Sun${pd}","Mon${pd}","Tue${pd}","Wed${pd}","Thu${pd}","Fri${pd}","Sat${pd}"\n`;
      let weeks = [];
      for (const prop of Object.getOwnPropertyNames(state.value.schedules)) {
        let slashedDate = addSlash(prop);
        let week = getWeek(slashedDate);
        if (!weeks[week]) {
          weeks[week] = [];
        }

        weeks[week].push({
          day: new Date(slashedDate).getDay(),
          s: helper(prop, state.value.schedules[prop]),
        });
      }

      console.log(weeks);
      weeks.forEach((w) => {
        let thisWeek = [];
        w.forEach((d) => {
          thisWeek[d.day] = d.s;
        });
        csv += `"${thisWeek[0]}","${thisWeek[1]}","${thisWeek[2]}","${thisWeek[3]}","${thisWeek[4]}","${thisWeek[5]}","${thisWeek[6]}"\n`;
      });

      csv = csv.replace(/undefined/g, '没有计划');

      const dataBlob = new Blob([`\ufeff${csv}`], { type: 'text/csv;charset=utf-8' });
      let url = window.URL.createObjectURL(dataBlob);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName();
      a.click();
      window.URL.revokeObjectURL(url);
    };
    return {
      handleDelete,
      handleExportCSV,
    };
  },
};
</script>

<template>
  <el-collapse v-model="collapseCtrl">
    <el-collapse-item title="我的计划" name="2">
      <div class="projects-wrapper">
        <el-table :data="state.projects" style="width: 100%" empty-text="还没有计划">
          <el-table-column prop="startAtmmdd" label="开始日期" width="80"> </el-table-column>
          <el-table-column prop="listName" label="词表名" width="80"> </el-table-column>
          <el-table-column prop="name" label="计划名" width="160"> </el-table-column
          ><el-table-column label="操作" width="80">
            <template #default="scope">
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color: red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-wrapper">
          <el-button @click="handleExportCSV">导出CSV</el-button>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
